<template>
    <!--<h5> 欢迎来到员工培训管理系统</h5>-->

    <!--<el-popover-->
    <!--placement="bottom"-->
    <!--title="标题"-->
    <!--width="500"-->
    <!--height="700"-->
    <!--trigger="click"-->
    <!--v-model="emojiShow"-->
    <!--&gt;-->
    <!--<el-button slot="reference">😀</el-button>-->
    <!--<div class="browBox">-->
    <!--<ul>-->
    <!--<li-->
    <!--v-for="(item, index) in faceList"-->
    <!--:key="index"-->
    <!--@click="getBrow(index)"-->
    <!--&gt;-->
    <!--{{ item }}-->
    <!--</li>-->
    <!--</ul>-->
    <!--</div>-->
    <!--</el-popover>-->
    <!--<el-button-->
    <!--class="submit-btn"-->
    <!--type="primary"-->
    <!--@click="submitMessage"-->
    <!--:disabled="content == ''"-->
    <!--&gt;发送-->
    <!--</el-button>-->
    <!--<el-input-->
    <!--:rows="5"-->
    <!--type="textarea"-->
    <!--placeholder="请输入内容"-->
    <!--@keyup.enter.native="submitMessage"-->
    <!--v-model="content"-->
    <!--&gt;-->
    <!--</el-input>-->
    <!--<div>-->
    <!--<form method="post">-->
    <!--<p>-->
    <!--My Editor:<br>-->
    <!--<textarea name="editor1" id="editor1">&lt;p&gt;Initial editor content.&lt;/p&gt;</textarea>-->
    <!--<script>-->
    <!--CKEDITOR.replace( 'editor1' );-->
    <!--</script>-->
    <!--</p>-->
    <!--<p>-->
    <!--<input type="submit">-->
    <!--</p>-->
    <!--</form>-->
    <!--</div>-->
    <div>
        <!--工具栏容器-->
        <div id="toolbar-container"></div>

        <!--编辑器容器-->
        <div id="editor">
            <p>This is the initial editor content.</p>
        </div>
        <div><el-button type="primary" @click="edituserDialog">确 定</el-button></div>
        <div v-html="d"></div>
    </div>

</template>

<script >
    import CKEditor from '@ckeditor/ckeditor5-build-decoupled-document'
    const appData = require("./emojis.json");
    export default {
        data() {
            return {
                //聊天输入内容
                content: "",
                //表情框是否展示
                emojiShow: false,
                //表情列表
                faceList: [],
                //表情文本
                getBrowString: "",


                editor:null,//编辑器实例

                d:""
            };
        },
        mounted() {
            this.initCKEditor()

        },
        created() {
            this.initCKEditor()
            this.loadEmojis();
        },

        methods: {
//加载表情，存放到表情列表中
            loadEmojis() {
                for (let i in appData) {
                    this.faceList.push(appData[i].char);
                }
            },
            // 获取用户点击之后的标签 ，存放到输入框内
            getBrow(index) {
                for (let i in this.faceList) {
                    if (index == i) {
                        this.getBrowString = this.faceList[index];
                        this.content += this.getBrowString;
                    }
                }
                this.emojiShow = false;
            },
            submitMessage(){
                //提交。。。
            },
            //ckeditor
            initCKEditor() {

                CKEditor.create(document.querySelector('#editor'), {
                    ckfinder: {
                        uploadUrl: '/admin/Upload/uploadUrl'
                        //后端处理上传逻辑返回json数据,包括uploaded(选项true/false)和url两个字段
                    }
                }).then(editor => {
                    const toolbarContainer = document.querySelector('#toolbar-container');
                    toolbarContainer.appendChild(editor.ui.view.toolbar.element);
                    this.editor = editor //将编辑器保存起来，用来随时获取编辑器中的内容等，执行一些操作
                    this.editor.setData("");

                }).catch(error => {
                    console.error(error);
                });
            },

            edituserDialog(){
                // this.setData();
                alert(this.editor.getData());
                this.d=this.editor.getData();
            },



        },



    }
</script>

<!--<style scoped>-->
<style>
    h5{
        font-size: 2rem;
    }
    .browBox {
        width: 100%;
        height: 200px;
        background: #e6e6e6;
        position: absolute;
        z-index: 100;
        bottom: 0px;
        overflow: scroll;
    }
    .browBox ul {
        display: flex;
        flex-wrap: wrap;
        padding: 10px;
    }
    .browBox ul li {
        cursor: pointer;
        width: 10%;
        font-size: 26px;
        list-style: none;
        text-align: center;
    }
    .submit-btn {
        margin: 0 15px 10px 0;
        float: right;
    }




</style>